<!doctype html>


<html>
<head>
  <link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon">
  <title>hovercard.js (Closure Library API Documentation - JavaScript)</title>
  <link rel="stylesheet" href="static/css/base.css">
  <link rel="stylesheet" href="static/css/doc.css">
  <link rel="stylesheet" href="static/css/sidetree.css">
  <link rel="stylesheet" href="static/css/prettify.css">

  <script>
     var _staticFilePath = "static/";
     var _typeTreeName = "goog";
     var _fileTreeName = "Source";
  </script>

  <script src="static/js/doc.js">
  </script>


  <meta charset="utf8">
</head>

<body onload="grokdoc.onLoad();">

<div id="header">
  <div class="g-section g-tpl-50-50 g-split">
    <div class="g-unit g-first">
      <a id="logo" href="index.html">Closure Library API Documentation</a>
    </div>

    <div class="g-unit">
      <div class="g-c">
        <strong>Go to class or file:</strong>
        <input type="text" id="ac">
      </div>
    </div>
  </div>
</div>





<div class="colmask rightmenu">
<div class="colleft">
    <div class="col1">
      <!-- Column 1 start -->

<div id="title">
       <span class="fn">hovercard.js</span>
</div>

<div class="g-section g-tpl-75-25">
  <div class="g-unit g-first" id="description">
    <span class='nodesc'>No description.</span>
  </div>
  

        <div class="g-unit" id="useful-links">
          <div class="title">Useful links</div>
          <ol>
            <li><a href="http://closure-library.googlecode.com/git/closure/goog/demos/hovercard.html">Demo</a></li>
            <li><a href="local_closure_goog_ui_hovercard.js.source.html"><span class='source-code-link'>Source Code</span></a></li>
            <li><a href="http://code.google.com/p/closure-library/source/browse/local/closure/goog/ui/hovercard.js">Git</a></li>
          </ol>
        </div>
</div>

<h2 class="g-first">File Location</h2>
  <div class="g-section g-tpl-20-80">
    <div class="g-unit g-first">
      <div class="g-c-cell code-label">/goog/ui/hovercard.js</div>
    </div>
  </div>
<hr/>


  <h2>Classes</h2>
 <div class="fn-constructor">
        <a href="class_goog_ui_HoverCard.html">
          goog.ui.HoverCard</a><br/>
        <div class="class-details">Create a hover card object.  Hover cards extend tooltips in that they don't
have to be manually attached to each element that can cause them to display.
Instead, you can create a function that gets called when the mouse goes over
any element on your page, and returns whether or not the hovercard should be
shown for that element.

Alternatively, you can define a map of tag names to the attribute name each
tag should have for that tag to trigger the hover card.  See example below.

Hovercards can also be triggered manually by calling
<code> triggerForElement</code>, shown without a delay by calling
<code> showForElement</code>, or triggered over other elements by calling
<code> attach</code>.  For the latter two cases, the application is responsible
for calling <code> detach</code> when finished.

HoverCard objects fire a TRIGGER event when the mouse moves over an element
that can trigger a hovercard, and BEFORE_SHOW when the hovercard is
about to be shown.  Clients can respond to these events and can prevent the
hovercard from being triggered or shown.

</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_HoverCard_TriggerEvent.html">
          goog.ui.HoverCard.TriggerEvent</a><br/>
        <div class="class-details">Create a trigger event for specified anchor and optional data.
</div>
 </div>
      



<h2>Enumerations</h2>






<div class="section">
  <table class="horiz-rule">


  </table>
</div>










      <!-- Column 1 end -->
    </div>

        <div class="col2">
          <!-- Column 2 start -->
          <div class="col2-c">
            <h2 id="ref-head">Directory ui</h2>
            <div id="localView"></div>
          </div>

          <div class="col2-c">
            <h2 id="ref-head">File Reference</h2>
            <div id="sideFileIndex" rootPath="" current="/goog/ui/hovercard.js"></div>
          </div>
          <!-- Column 2 end -->
        </div>
</div>
</div>

</body>
</html>
